<template>
  <div class="pie_box">
    <div class="pie" ref="chart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据
      dataList: [
        { value: 2318110, name: "其他" },
        { value: 1067557, name: "专营店" },
        { value: 1800000, name: "1000-2000个商品店铺" },
        { value: 6855120, name: "专卖店" },
      ],
      color: ["#E4453B", "#3E3BE4", "#E4B53B", "#3BA7E4"],
      totalNum: 0,
    };
  },
  methods: {
    //初始化图标
    initEchar() {
      let _this = this; //缓存vue实例
      let chartEl = this.$refs.chart; //获取容器
      let myChart = this.$echarts.init(chartEl); //初始化图标
      // echarts图标配置
      const option = {
        // 标题
        title: {
          text: "店铺总销售额",
        },
        // 详情显示框
        tooltip: {
          trigger: "item",
          // 设置显示框层级
          formatter: function (param) {
            return `
              <div style='color:#707985;border:none; padding: 0 10px'>
                <div style='overflow:hidden;text-overflow: ellipsis;white-space: nowrap;text-align:left;'>${
                  param.name
                }</div>
                <div style='text-align:left;'>销售额：${param.value}</div>
                <div style='text-align:left;'>销售额占比：${(
                  (param.value / _this.totalNum) *
                  100
                ).toFixed(2)}%</div>
              </div>
            `;
          },
          // 颜色字体设置
          backgroundColor: "#fff",
          textStyle: {
            fontSize: 14,
          },
          // 其他样式设置
          extraCssText:
            "width:auto;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);border:1px solid rgba(228, 69, 59, 0.4)",
        },
        // 图例
        legend: {
          orient: "vertical",
          right: 0,
          bottom: "center",
          itemGap: 20, //图例之间的间距
          itemWidth: 40,
          itemHeight: 20,
          textStyle: {
            fontSize: 14,
            color: "#4E5867",
            // 图例文本样式设置
            rich: {
              left: {
                width: 130,
                padding: [0, 0, 0, 10],
              },
              right: {
                width: 40,
                align: "right",
              },
            },
          },
          // 图例文本数据显示
          formatter: function (name) {
            _this.totalNum = 0;
            var tarValue;
            for (let i = 0; i < _this.dataList.length; i++) {
              _this.totalNum += _this.dataList[i].value;
              if (_this.dataList[i].name == name) {
                tarValue = _this.dataList[i].value;
              }
            }
            var p = (tarValue / _this.totalNum) * 100;
            return "{left|" + name + "}" + "{right|" + p.toFixed(2) + "%}";
          },
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: ["40%", "59%"],
            avoidLabelOverlap: false,
            color: _this.color,
            label: {
              show: false,
              position: "center",
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            data: this.dataList,
            center: [100, "50%"],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchar();
    });
  },
};
</script>

<style scoped>
.pie {
  margin: 0 auto;
  width: 25%;
  height: 300px;
}
.toolbox {
  width: 140px;
  height: 34px;
  background: #fff;
}
</style>